<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <title>demo5模板语法-属性绑定</title>
  <script src="./js/vue.min.js"></script>

</head>
<style>
  .class1{
    background: #b3d4fc;
    color: red;
  }
</style>
<!--如果不增加v-bind的xmlns的绑定，会有红色错误提示，但不影响使用-->
<body>
   <div id="app">
     <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
     <br>
     <br>
     <div v-bind:class ="{'class1': use}">
       v-bind:class指令
     </div>
   </div>
   <script type="application/javascript">
     var vm = new Vue({
       el: "#app",
       data: {
        use: false
       }
     });


   </script>
</body>

</html>
